<template>
	<div id="app">
		<div class="example">
			<h3> <router-link :to="{path: '/course'}">课程列表</router-link></h3>
			<div class="list-group">
				<a href="#" class="list-group-item" v-for="course in courseList">
					<h4 class="list-group-item-heading"><img :src="course.src"/></h4>
					<p class="list-group-item-text text-muted">{{course.description}}</p>
				</a>
			</div>
		</div>
		<div class="example">
			<h3><router-link :to="{path: '/teacher'}">教师列表</router-link></h3>
			<div class="list-group">
				<a href="#" class="list-group-item" v-for="teacher in teacherList">
					<h4 class="list-group-item-heading"><img :src="teacher.src"/></h4>
					<p class="list-group-item-text text-muted">{{teacher.name}}：{{teacher.description}}</p>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'MainContent',
		components: {

		},
		data() {
			return {
				courseList: [{
						title: 'Vue课程',
						src: 'static/img/logos.png',
						description: '一套构建用户界面的渐进式框架',
					},
					{
						title: 'JavaScript课程',
						src: 'static/img/js.jpg',
						description: '是一种直译式脚本语言',

					},
					{
						title: 'HTML课程',
						src: 'static/img/html.jpg',
						description: 'HTML5 是最新的 HTML 标准',
					}
				],
				teacherList: [{
						name: 'Jack',
						src: 'static/img/nan1.jpg',
						description: 'Vue教师',
					},
					{
						name: 'Rose',
						src: 'static/img/nv.jpg',
						description: 'JavaScript教师',

					},
					{
						name: 'Jhon',
						src: 'static/img/nan2.jpg',
						description: 'HTML5教师',
					}
				],
			}
		}
	}
</script>
<style scoped>
	.example{
		width: 50%;
		float: left;
	}
</style>